<!-- 理论上这些组件都是在别的子包里面，这里为了省事就放在一个包 -->
<script setup lang="ts">
import BarChart from '@/subPages/echarts/components/BarChart.vue?async'
import DonutChart from '@/subPages/echarts/components/DonutChart.vue?async'
import FunnelChart from '@/subPages/echarts/components/FunnelChart.vue?async'
import GaugeChart from '@/subPages/echarts/components/GaugeChart.vue?async'
import LineChart from '@/subPages/echarts/components/LineChart.vue?async'
import LiquidFillChart from '@/subPages/echarts/components/LiquidFillChart.vue?async'
import MiniLineChart from '@/subPages/echarts/components/MiniLineChart.vue?async'
import PieChart from '@/subPages/echarts/components/PieChart.vue?async'
import RadarChart from '@/subPages/echarts/components/RadarChart.vue?async'
import ScatterChart from '@/subPages/echarts/components/ScatterChart.vue?async'
import StackedBarChart from '@/subPages/echarts/components/StackedBarChart.vue?async'

definePage({
  name: 'echartsAsync',
  style: {
    navigationBarTitleText: 'echarts 异步跨包示例',
  },
})
</script>

<template>
  <view class="page-container">
    <!-- 饼图 -->
    <view class="chart-card">
      <view class="chart-title">
        饼图示例
      </view>
      <PieChart />
    </view>

    <!-- 柱状图 -->
    <view class="chart-card">
      <view class="chart-title">
        柱状图示例
      </view>
      <BarChart />
    </view>

    <!-- 折线图 -->
    <view class="chart-card">
      <view class="chart-title">
        折线图示例
      </view>
      <LineChart />
    </view>

    <!-- 雷达图 -->
    <view class="chart-card">
      <view class="chart-title">
        雷达图示例
      </view>
      <RadarChart />
    </view>

    <!-- 散点图 -->
    <view class="chart-card">
      <view class="chart-title">
        散点图示例
      </view>
      <ScatterChart />
    </view>

    <!-- 环形图 -->
    <view class="chart-card">
      <view class="chart-title">
        环形图示例
      </view>
      <DonutChart />
    </view>

    <!-- 漏斗图 -->
    <view class="chart-card">
      <view class="chart-title">
        漏斗图示例
      </view>
      <FunnelChart />
    </view>

    <!-- 仪表盘图 -->
    <view class="chart-card">
      <view class="chart-title">
        仪表盘示例
      </view>
      <GaugeChart />
    </view>

    <!-- 迷你折线图 -->
    <view class="chart-card">
      <view class="chart-title">
        迷你折线图示例
      </view>
      <MiniLineChart />
    </view>

    <!-- 堆叠柱状图 -->
    <view class="chart-card">
      <view class="chart-title">
        堆叠柱状图示例
      </view>
      <StackedBarChart />
    </view>

    <!-- 水球图 -->
    <view class="chart-card">
      <view class="chart-title">
        水球图示例
      </view>
      <LiquidFillChart />
    </view>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  background-color: #f9fafb;
  padding: 40rpx;
}

.chart-card {
  margin-bottom: 40rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
  padding: 40rpx;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
}

.chart-title {
  margin-bottom: 40rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 48rpx;
  color: #1f2937;
  font-weight: 500;
}
</style>
